// 源插件
import React, { PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Form, notification } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import OptionModal from './OptionModal.js';
// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ fourfunds, loading }) => ({
  fourfunds,
  loading: loading.models.fourfundsRule,
}))
@Form.create()
class OptionHistory extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSourceSC: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceSP: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceModal: {
      data: [],
      total: [],
      code: 0,
    },
  };

  /* dataSourceModalChange(){
    const {dispatch} = this.props;
    const that = this;
    dispatch({
      type: 'fourfunds/GetTradeList',
      payload: {

      },
      callback: (res) => {
        that.setState({
          dataSourceModal:{
            unfixed:true,
            code:1,
            data:res.data,
            total:[],
            columns:[
              {
                title: '类型',
                dataIndex: 'type',
                type:'number',
                width:60,
                filters: [
                  {
                    text: 'SP',
                    value: '1',
                  },{
                    text: 'SC',
                    value: '2',
                  }, {
                    text: 'BP',
                    value: '3',
                  },{
                    text: 'BC',
                    value: '4',
                  },
                ],
                render: (value, row, index) => {
                  if (value === 1) {
                    return 'SP';
                  } else if (value === 2) {
                    return 'SC';
                  } else if (value === 3) {
                    return 'BP';
                  } else if (value === 4) {
                    return 'BC';
                  }else{
                    return value
                  }
                },
              },
              {
                title: '股票代码',
                dataIndex: 'code',
                type:'string',
                width:120,
                sorter:true,
                search:true,
              },

              {
                title: '执行价',
                width:80,
                dataIndex: 'strikeprice',
                type:'number',
                sorter: true,
              },
              {
                title: '成本价',
                width:75,
                dataIndex: 'premium',
                type:'number',
                sorter: true,
              },
              {
                title: '期权价格',
                width:80,
                dataIndex: 'premium',
                type:'number',
                sorter: true,
              },
              {
                title: '股数',
                width:80,
                dataIndex: 'contracts',
                type:'number',
                sorter: true,
              },
              {
                title: '到期日',
                width:100,
                dataIndex: 'expiry',
                type:'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span >{typeof value === 'string'?value.split(' ')[0]:''}</span>
                }
              },
              {
                title: '是否属于股票池',
                width:100,
                dataIndex: 'delflag',
                type:'number',
                sorter: true,
                render: (value, row, index) => {
                  if (value === 0) {
                    return '属于';
                  } else if (value === 1) {
                    return '不属于';
                  }
                },
                editable: {
                  filter:[
                    {
                      text: '属于',
                      value: '0',
                    },{
                      text: '不属于',
                      value: '1',
                    },
                  ],
                },
              }
            ]
          },
        })
      }
    });
  } */

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'fourfunds/GetOptionHistory',
      payload: {},
      callback: res => {
        that.setState({
          dataSourceSC: {
            title: '四号基金期权历史持仓SC ',
            code: 1,
            data: res.data.sc,
            total: ['profit', 'initvalue', 'curvalue', 'position'],
            // paging:true,
            columns: [
              {
                title: '类型',
                dataIndex: 'type',
                type: 'number',
                width: 60,
                filters: [
                  {
                    text: 'SP',
                    value: '1',
                  },
                  {
                    text: 'SC',
                    value: '2',
                  },
                  {
                    text: 'BP',
                    value: '3',
                  },
                  {
                    text: 'BC',
                    value: '4',
                  },
                ],
                render: (value, row, index) => {
                  if (value === 1) {
                    return 'SP';
                  }
                  if (value === 2) {
                    return 'SC';
                  }
                  if (value === 3) {
                    return 'BP';
                  }
                  if (value === 4) {
                    return 'BC';
                  }
                  return value;
                },
              },
              {
                title: '期权代码',
                dataIndex: 'optioncode',
                type: 'string',
                width: 120,
                sorter: true,
                search: true,
              },

              {
                title: '执行价',
                width: 80,
                dataIndex: 'strikeprice',
                type: 'number',
                sorter: true,
              },
              {
                title: '成本价',
                width: 75,
                dataIndex: 'cost',
                type: 'number',
                sorter: true,
              },
              {
                title: '当前价格',
                width: 75,
                dataIndex: 'sellprice',
                type: 'number',
                sorter: true,
              },
              /* {
                  title: '盈亏幅度',
                  width:90,
                  dataIndex: 'todayprofit',
                  type:'number',
                  sorter: true,
                }, */
              {
                title: '盈亏金额',
                width: 90,
                dataIndex: 'profit',
                type: 'number',
                sorter: true,
              },
              {
                title: '初始权利金',
                width: 90,
                dataIndex: 'initvalue',
                type: 'number',
                sorter: true,
              },
              {
                title: '当前剩余权利金',
                width: 90,
                dataIndex: 'curvalue',
                type: 'number',
                sorter: true,
              },
              {
                title: '股数',
                width: 60,
                dataIndex: 'optioncount',
                type: 'number',
                sorter: true,
              },
              {
                title: '到期日',
                dataIndex: 'expiry',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              /* {
                title: '剩余天数',
                width:60,
                dataIndex: 'dayleft',
                type:'number',
                sorter: true,
              }, */
              {
                title: '头寸规模',
                width: 90,
                dataIndex: 'position',
                type: 'number',
                sorter: true,
              },
              {
                title: '操作时间',
                dataIndex: 'date',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
            ],
          },
          dataSourceSP: {
            title: '四号基金期权历史持仓SP ',
            code: 1,
            data: res.data.sp,
            total: ['profit', 'initvalue', 'curvalue', 'position'],
            // paging:true,
            columns: [
              {
                title: '类型',
                dataIndex: 'type',
                type: 'number',
                width: 60,
                filters: [
                  {
                    text: 'SP',
                    value: '1',
                  },
                  {
                    text: 'SC',
                    value: '2',
                  },
                  {
                    text: 'BP',
                    value: '3',
                  },
                  {
                    text: 'BC',
                    value: '4',
                  },
                ],
                render: (value, row, index) => {
                  if (value === 1) {
                    return 'SP';
                  }
                  if (value === 2) {
                    return 'SC';
                  }
                  if (value === 3) {
                    return 'BP';
                  }
                  if (value === 4) {
                    return 'BC';
                  }
                  return value;
                },
              },
              {
                title: '期权代码',
                dataIndex: 'optioncode',
                type: 'string',
                width: 120,
                sorter: true,
                search: true,
              },

              {
                title: '执行价',
                width: 80,
                dataIndex: 'strikeprice',
                type: 'number',
                sorter: true,
              },
              {
                title: '成本价',
                width: 75,
                dataIndex: 'cost',
                type: 'number',
                sorter: true,
              },
              {
                title: '当前价格',
                width: 75,
                dataIndex: 'sellprice',
                type: 'number',
                sorter: true,
              },
              /* {
                title: '盈亏幅度',
                width:90,
                dataIndex: 'todayprofit',
                type:'number',
                sorter: true,
              }, */
              {
                title: '盈亏金额',
                width: 90,
                dataIndex: 'profit',
                type: 'number',
                sorter: true,
              },
              {
                title: '初始权利金',
                width: 90,
                dataIndex: 'initvalue',
                type: 'number',
                sorter: true,
              },
              {
                title: '当前剩余权利金',
                width: 90,
                dataIndex: 'curvalue',
                type: 'number',
                sorter: true,
              },
              {
                title: '股数',
                width: 60,
                dataIndex: 'optioncount',
                type: 'number',
                sorter: true,
              },
              {
                title: '到期日',
                dataIndex: 'expiry',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              /* {
                 title: '剩余天数',
                 width:60,
                 dataIndex: 'dayleft',
                 type:'number',
                 sorter: true,
               }, */
              {
                title: '头寸规模',
                width: 90,
                dataIndex: 'position',
                type: 'number',
                sorter: true,
              },
              {
                title: '操作时间',
                dataIndex: 'date',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
            ],
          },
        });
      },
    });
  }

  openVisible() {
    this.dataSourceModalChange();
    this.setState({
      Visible: true,
    });
  }

  closeVisbile() {
    const that = this;
    this.setState(
      {
        Visible: false,
      },
      () => {
        that.dataSourceChange();
      }
    );
  }

  insert() {
    const that = this;
    const key = `open${Date.now()}`;
    const { dispatch } = that.props;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          dispatch({
            type: 'fourfunds/GetOptionSyncLastTradeInfo',
            callback: res => {
              that.dataSourceChange();
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否开始同步',
      btn,
      key,
      onClose: close,
    });
  }

  insertToday() {
    const that = this;
    const key = `open${Date.now()}`;
    const { dispatch } = that.props;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          dispatch({
            type: 'fourfunds/GetOptionCreateTodayList',
            callback: res => {
              that.dataSourceChange();
            },
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否开始生成',
      btn,
      key,
      onClose: close,
    });
  }

  handleSave(row, values) {
    const that = this;
    const { dispatch } = that.props;
    dispatch({
      type: 'fourfunds/OptionClosePosition',
      payload: {
        id: row.id,
        sellPrice: values.nowprice,
      },
      callback: res => {
        that.dataSourceChange();
      },
    });
  }

  rowSetKey(record, index) {
    if (record.ctbflag === 1) {
      return true;
    }
  }

  render() {
    const { Visible, dataSourceModal, dataSourceSC, dataSourceSP } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          {/* <Button type={'primary'} onClick={this.insertToday.bind(this)} style={{marginBottom:10,marginRight:25}} ghost>生成今日信息</Button>
          <Button type="danger" onClick={this.clear.bind(this)} style={{marginBottom:10,marginRight:25}} ghost>清空生成信息</Button>
          <Button type={'primary'}  onClick={this.insert.bind(this)} style={{marginBottom:10,marginRight:25}} ghost>同步期权今日操作信息</Button>
          <Button   onClick={this.openVisible.bind(this)} style={{marginBottom:10,marginRight:25}}>标记股票池</Button>
          <br/>
          <br/> */}
          <StandardTablePro
            dataSource={dataSourceSC}
            handleSave={this.handleSave.bind(this)}
            // rowSetKey =  {this.rowSetKey.bind(this)}
          />
          <br />
          <br />
          <br />
          <StandardTablePro
            dataSource={dataSourceSP}
            handleSave={this.handleSave.bind(this)}
            // rowSetKey =  {this.rowSetKey.bind(this)}
          />
          {/* <OptionModal
            visible = {Visible}
            dataSource = {dataSourceModal}
            dataSourceChange = {this.dataSourceModalChange.bind(this)}
            closeVisbile = {this.closeVisbile.bind(this)}
          /> */}
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default OptionHistory;
